<template>
    <template v-for="item in menuList" :key="item.path">
        <!-- 没有子路由 -->
        <template v-if="!item.children">
            <el-menu-item v-if="!item.meta.hidden" :index="item.path" @click="goRoute">
                <!-- <el-icon>
                    <component :is="item.meta.icon"></component>
                </el-icon> -->
                <template #title>
                    <span>{{ item.meta.title }}</span>
                </template>
            </el-menu-item>
        </template>
        
        <!-- 子路由只有一个 -->
        <!-- <template v-if="item.children && item.children.length == 1">
            <el-menu-item v-if="!item.children[0].meta.hidden" :index="item.children[0].path" @click="goRoute">
                <el-icon>
                    <component :is="item.children[0].meta.icon"></component>
                </el-icon>
                <template #title>
                    <span>{{ item.children[0].meta.title }}</span>
                </template>
            </el-menu-item>
        </template> -->
        <!-- 子路由只有一个，也折叠 -->
        <el-sub-menu v-if="item.children && item.children.length == 1" :index="item.path">
            <template #title>
                <el-icon>
                    <component :is="item.meta.icon"></component>
                </el-icon>
                <span>{{ item.meta.title }}</span>
            </template>
            <MenuItem :menuList="item.children"></MenuItem>
        </el-sub-menu>
        
        <!-- 子路由大于1个的，有折叠 -->
        <el-sub-menu v-if="item.children && item.children.length > 1" :index="item.path">
            <template #title>
                <el-icon>
                    <component :is="item.meta.icon"></component>
                </el-icon>
                <span>{{ item.meta.title }}</span>
            </template>
            <!-- 递归组件，必须有名字 -->
            <MenuItem :menuList="item.children"></MenuItem>
        </el-sub-menu>
    </template>
</template>

<script setup>
// 引入路由器
import { useRouter } from 'vue-router'
// 获取路由器对象
let $router = useRouter()

// 获取父组件传递过来的全部路由数据
defineProps(['menuList'])

// 点击菜单的回调
const goRoute = (vc) => {
    $router.push(vc.index)
}
</script>

<!-- 给组件取名 -->
<script>
export default {
    name: 'MenuItem'
}
</script>

<style scoped lang="scss"></style>